<template>
  <div>
    <el-page-header @back="goBack" content="忘记密码">
</el-page-header>
<el-form :model="form" ref="form" :rules="rules" :inline="false" label-width="80px" style="width:400px;margin-left:280px">
                <el-form-item label="账号" prop="username">
                    <el-input placeholder="请输入账号" v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="password">
                    <el-input placeholder="请输入新密码" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                  <el-input  placeholder="请输入手机号码" v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="checkCode">
                  <el-input placeholder="请输入验证码" v-model="form.checkCode" style="width:50%"></el-input>
                <el-button v-if="!flag" style="height:40px;margin-left:5px"  plain size="small" @click="sendMess">获取验证码</el-button>
                  <el-button style="font-size:12px;margin-left:5px" v-else plain size="mini"><el-statistic style="color:red" @finish="overTime" ref="outTime" :value="deadline2" format="ss秒后重发" time-indices>
                   </el-statistic></el-button>
            </el-form-item>
                <el-form-item prop="resource">
               <el-radio-group v-model="form.role">
               <el-radio label="1">教师</el-radio>
               <el-radio label="2">学校</el-radio>
                  </el-radio-group>

  </el-form-item>
            <div class="form-footer" style="margin-left:100px">
                <el-button type="primary" @click="submit">修改</el-button>
            </div>
            </el-form>

  </div>

</template>

<script>
import { dxCheck, upYouPass } from '../api/info.js'
export default {
  data () {
    return {
      form: {
        username: '',
        password: '',
        role: '1',
        phone: '',
        checkCode: null

      },
      sendCode: 'null',
      deadline2: 0,
      deadTime: '',
      flag: false,
      rules: {
        username: [
          { required: true, message: '请输入数据', trigger: 'blur' },
          { min: 5, max: 18, message: '长度在 5 到 18 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入数据', trigger: 'blur' },
          { min: 5, max: 18, message: '长度在 5 到 18 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入数据', trigger: 'blur' },
          { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' }
        ],
        checkCode: [
          { required: true, message: '请输入数据', trigger: 'blur' },
          { min: 5, max: 18, message: '长度在 5 到 18 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    goBack () {
      this.$router.push('/login')
      // console.log('go back')
    },
    resetForm () {
      this.$refs.form.resetFields()
    },
    // 获取验证码
    sendMess () {
      if (this.form.phone && this.form.phone.length === 11) {
        dxCheck({ info: this.form.phone, myRole: this.form.role }).then(({ data }) => {
          // console.log(data)
          if (data.status !== 200) {
            return this.$message.info('手机号未注册')
          }
          this.flag = !this.flag
          this.deadline2 = Date.now() + 1000 * 60
          this.deadTime = Date.now() + 1000 * 60 * 5
          this.$message.info('验证码已发送')
          this.sendCode = data.mycode
        })
      } else {
        this.$message.info('请输入手机号')
      }
    },
    // 倒计时结束
    overTime () {
      // console.log('hell')
      this.flag = !this.flag
    },
    // 表单验证
    submitForm () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (!(parseInt(this.form.checkCode) === parseInt(this.sendCode))) {
            return this.$message.info('验证码错误')
          }
          // 调用修改密码接口
          upYouPass(this.form).then(({ data }) => {
            if (data.status === 200) {
              this.$router.push({ name: 'login' })
              this.$message.success('修改成功，请登录')
              return false
            }
            this.$message.info(data.message)
            console.log(data)
          })
        } else {
          this.$message.info('请填写表单数据')
          return false
        }
      })
    },
    // 修改密码
    submit () {
      if ((this.deadTime) && (this.form.checkCode) && (new Date() > this.deadTime)) {
        this.deadTime = null
        this.sendCode = null
        // console.log(new Date())
        // console.log(this.deadTime)
        return this.$message.error('验证码失效')
      }
      // console.log(this.sendCode)
      if (!this.sendCode) {
        return this.$message.info('请获取验证码')
      } else if (!this.form.checkCode) {
        return this.$message.info('请输入验证码')
      } else {
        this.submitForm()
      }
    }
  }
}
</script>
<style lang='less' scoped>
.el-form{
  margin:0 auto;
  padding-top: 50px;
  padding-bottom: 50px;
}
.form-footer{
  width: 400px;
  margin: 0 auto;
}

</style>
